<template>
  <div class="severe-damage-form">
    <div class="form-header">
      <h2 class="form-title">其他（专项）巡查</h2>
    </div>
    
    <el-form 
      ref="severeForm"
      :model="formData" 
      :rules="rules"
      label-width="220px"
      label-position="left"
      class="form-content"
      :validate-on-rule-change="false"
    >
      <!-- 基本情况 -->
      <div class="section inspection-item" >
        <h3 class="section-title">基本情况</h3>
        
        <!-- 地址行 -->
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="地址" prop="address">
              <el-input 
                v-model="formData.address" 
                placeholder="请输入地址"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="存在问题" prop="addressStatus">
              <el-select 
                v-model="formData.addressStatus" 
                placeholder="选择存在问题"
              >
                <el-option label="选择存在问题" value=""></el-option>
                <el-option label="存在问题" value="exists"></el-option>
                <el-option label="无问题" value="none"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 层数行 -->
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="地上层数（层）" prop="aboveGroundFloors">
              <el-input-number 
                v-model="formData.aboveGroundFloors" 
                :min="0" 
                :precision="0"
                controls-position="right"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="地下层数（层）" prop="undergroundFloors">
              <el-input-number 
                v-model="formData.undergroundFloors" 
                :min="0" 
                :precision="0"
                controls-position="right"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 建筑面积和高度行 -->
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="建筑面积（平方米）" prop="buildingArea">
              <el-input-number 
                v-model="formData.buildingArea" 
                :min="0" 
                :precision="2"
                placeholder="0.00"
                controls-position="right"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="建筑高度（米）" prop="buildingHeight">
              <el-input-number 
                v-model="formData.buildingHeight" 
                :min="0" 
                :precision="2"
                placeholder="0.00"
                controls-position="right"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 建筑期间和房屋套数行 -->
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="建筑期间" prop="buildingPeriod">
              <el-date-picker
                v-model="formData.buildingPeriod"
                type="year"
                placeholder="2025"
                format="yyyy"
                value-format="yyyy"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="房屋套数（套）" prop="houseCount">
              <el-input-number 
                v-model="formData.houseCount" 
                :min="0" 
                :precision="0"
                controls-position="right"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 房屋用途和保护建筑性质行 -->
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="房屋用途" prop="houseUsage">
                          <el-radio-group v-model="formData.houseUsage" >
              <el-radio 
                v-for="item in dictData.houseUsageDict" 
                :key="item.id" 
                :label="item.id"
              >
                {{ item.name }}
              </el-radio>
            </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="选择保护建筑性质" prop="protectionNature">
                          <el-radio-group v-model="formData.protectionNature">
              <el-radio 
                v-for="item in dictData.protectionNatureDict" 
                :key="item.id" 
                :label="item.id"
              >
                {{ item.name }}
              </el-radio>
            </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 保护建筑类型行 -->
        <el-row>
          <el-col :span="24">
            <el-form-item label="保护建筑类型" prop="protectionType">
                          <el-radio-group v-model="formData.protectionType" >
              <el-radio 
                v-for="item in dictData.protectionTypeDict" 
                :key="item.id" 
                :label="item.id"
              >
                {{ item.name }}
              </el-radio>
            </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 结构类型行 -->
        <el-row>
          <el-col :span="24">
            <el-form-item label="结构类型" prop="structureType">
                          <el-radio-group v-model="formData.structureType" >
              <el-radio 
                v-for="item in dictData.structureTypeDict" 
                :key="item.id" 
                :label="item.id"
              >
                {{ item.name }}
              </el-radio>
            </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 楼板形式行 -->
        <el-row>
          <el-col :span="24">
            <el-form-item label="楼（房间）板形式" prop="floorForm">
                          <el-radio-group v-model="formData.floorForm" >
              <el-radio 
                v-for="item in dictData.floorFormDict" 
                :key="item.id" 
                :label="item.id"
              >
                {{ item.name }}
              </el-radio>
            </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </div>

      <!-- 结构部分 -->
      <div class="section structure-section">
        <h3 class="section-title">结构部分</h3>
        
        <!-- 地基基础检查项 -->
        <InspectionItem
          :titles="['地基基础是否有明显不均匀沉降等问题','地基基础问题补充说明','地基基础的照片位置','地基基础的详细描述']"
          :field-names="['foundationIssue','foundationInputText','foundationAttachments','foundationDescription']"
          v-model="formData"
        />

        <!-- 钢筋混凝土柱检查项 -->
        <InspectionItem
          :titles="['钢筋混凝土柱有害性明显缺陷','钢筋混凝土柱问题补充说明','钢筋混凝土柱有害性明显缺陷照片', '钢筋混凝土柱有害性明显缺陷描述']"
          :field-names="['concreteColumnIssue','concreteColumnInputText','concreteColumnAttachments','concreteColumnDescription']"
          v-model="formData"
        />

        <!-- 砌体结构检查项 -->
        <InspectionItem
          :titles="['砌体结构是否存在明显缺陷','砌体结构损坏位置','砌体结构损坏照片','砌体结构损坏描述']"
          :field-names="['masonryIssue','masonryLocation','masonryAttachments','masonryDescription']"
          v-model="formData"
        />

        <!-- 木构件检查项 -->
        <InspectionItem
          :titles="['木构件是否存在明显缺陷','木构件损坏位置','木构件损坏照片','木构件损坏描述']"
          :field-names="['woodenIssue','woodenLocation','woodenAttachments','woodenDescription']"
          v-model="formData"
        />

        <!-- 屋面-严重漏雨检查项 -->
        <InspectionItem
          :titles="['屋面是否存在缺陷','严重漏雨位置','严重漏雨照片','严重漏雨描述']"
          :field-names="['roofLeakageIssue','roofLeakageLocation','roofLeakageAttachments','roofLeakageDescription']"
          v-model="formData"
        />

        <!-- 屋面-构造层缺陷检查项 -->
        <InspectionItem
          :titles="['构造层、设施等部位缺陷','构造层缺陷位置','构造层缺陷照片','构造层缺陷描述']"
          :field-names="['roofStructureIssue','roofStructureLocation','roofStructureAttachments','roofStructureDescription']"
          v-model="formData"
        />

        <el-row class="inspection-item">
           <el-col :span="24"  >
             <el-form-item label="楼地面是否存在损坏" prop="protectionNature" >
                           <el-radio-group v-model="formData.protectionNature">
               <el-radio 
                 v-for="item in dictData.protectionNatureDict" 
                 :key="item.id" 
                 :label="item.id"
               >
                 {{ item.name }}
               </el-radio>
             </el-radio-group>
             </el-form-item>
             <!-- 整体面层严重损坏检查项 -->
        <InspectionItem
          :titles="['整体面层严重损坏','整体面层严重损坏位置','整体面层严重损坏照片','整体面层严重损坏描述']"
          :field-names="['floorOverallDamageIssue','floorOverallDamageLocation','floorOverallDamageAttachments','floorOverallDamageDescription']"
          :mode="1"
          v-model="formData"
        />

        <!-- 木楼地面严重损坏检查项 -->
        <InspectionItem
          :titles="['木楼地面严重损坏','木楼地面严重损坏位置','木楼地面严重损坏照片','木楼地面严重损坏描述']"
          :field-names="['woodFloorDamageIssue','woodFloorDamageLocation','woodFloorDamageAttachments','woodFloorDamageDescription']"
          :mode="1"
          v-model="formData"
        />

        <!-- 楼梯严重损坏检查项 -->
        <InspectionItem
          :titles="['楼梯严重损坏','楼梯严重损坏位置','楼梯严重损坏照片','楼梯严重损坏描述']"
          :field-names="['stairsDamageIssue','stairsDamageLocation','stairsDamageAttachments','stairsDamageDescription']"
          :mode="1"
          v-model="formData"
        />

        <!-- 其他楼地面损坏检查项 -->
        <InspectionItem
          :titles="['其他楼地面损坏','其他楼地面损坏位置','其他楼地面损坏照片','其他楼地面损坏描述']"
          :field-names="['otherFloorDamageIssue','otherFloorDamageLocation','otherFloorDamageAttachments','otherFloorDamageDescription']"
          :mode="1"
          v-model="formData"
        />

 
           </el-col>
        </el-row>
       <!-- 其他问题检查项 -->
       <InspectionItem
          :titles="['其他问题','其他问题位置','其他问题照片','其他问题描述']"
          :field-names="['otherIssue','otherIssueLocation','otherIssueAttachments','otherIssueDescription']"
          v-model="formData"
        />
    
      </div>

             <div class="section structure-section">
         <h3 class="section-title">装修部分</h3>
         <el-row>
           <el-col :span="24" class="inspection-item" >
             <el-form-item label="楼地面是否存在损坏" prop="protectionNature" >
                           <el-radio-group v-model="formData.protectionNature">
               <el-radio 
                 v-for="item in dictData.protectionNatureDict" 
                 :key="item.id" 
                 :label="item.id"
               >
                 {{ item.name }}
               </el-radio>
             </el-radio-group>
             </el-form-item>
         <!-- 外檐装饰材料和保温材料检查项 -->
         <InspectionItem
           :titles="['外檐装饰材料和保温材料开裂、脱落、脱落','外檐装饰材料脱落位置','外檐装饰材料脱落照片','外檐装饰材料脱落描述']"
           :field-names="['exteriorDecorationIssue','exteriorDecorationLocation','exteriorDecorationAttachments','exteriorDecorationDescription']"
           :mode="1"
           v-model="formData"
         />

         <!-- 阳台栏板检查项 -->
         <InspectionItem
           :titles="['阳台栏板存在脱落风险','阳台栏板脱落位置','阳台栏板脱落照片','阳台栏板脱落描述']"
           :field-names="['balconyRailingIssue','balconyRailingLocation','balconyRailingAttachments','balconyRailingDescription']"
           :mode="1"
           v-model="formData"
         />
        </el-col>
      </el-row>
         <!-- 门窗严重破损检查项 -->
         <InspectionItem
           :titles="['门窗是否严重破损','门窗严重破损位置','门窗严重破损照片','门窗严重破损描述']"
           :field-names="['windowDoorIssue','windowDoorLocation','windowDoorAttachments','windowDoorDescription']"
           :mode="1"
           v-model="formData"
         />

         <!-- 顶棚严重破损检查项 -->
         <InspectionItem
           :titles="['顶棚是否严重破损','顶棚严重破损位置','顶棚严重破损照片','顶棚严重破损描述']"
           :field-names="['ceilingIssue','ceilingLocation','ceilingAttachments','ceilingDescription']"
           :mode="1"
           v-model="formData"
         />

         <!-- 装修部分其他问题检查项 -->
         <InspectionItem
           :titles="['其他问题','其他问题位置','其他问题照片','其他问题描述']"
           :field-names="['decorationOtherIssue','decorationOtherLocation','decorationOtherAttachments','decorationOtherDescription']"
           :mode="1"
           v-model="formData"
         />
      </div>

      <!-- 设备部分 -->
      <div class="section structure-section">
        <h3 class="section-title">设备部分</h3>
        
        <!-- 下水道严重堵塞检查项 -->
        <InspectionItem
          :titles="['是否存在下水道严重堵塞、崩塌、滴水等','下水道严重堵塞位置','下水道严重堵塞照片','下水道严重堵塞描述']"
          :field-names="['drainageIssue','drainageLocation','drainageAttachments','drainageDescription']"
          v-model="formData"
        />

        <!-- 电力管线老化破损检查项 -->
        <InspectionItem
          :titles="['是否存在电力管线老化破损及提器等腐蚀','电力管线老化破损及提器等腐蚀位置','电力管线老化破损及提器等腐蚀照片','电力管线老化破损及提器等腐蚀描述']"
          :field-names="['powerLineIssue','powerLineLocation','powerLineAttachments','powerLineDescription']"
          v-model="formData"
        />

        <!-- 设备部分其他问题检查项 -->
        <InspectionItem
          :titles="['其他问题','其他问题位置','其他问题照片','其他问题描述']"
          :field-names="['equipmentOtherIssue','equipmentOtherLocation','equipmentOtherAttachments','equipmentOtherDescription']"
          v-model="formData"
        />
      </div>

      <!-- 查勘结论部分 -->
      <div class="section structure-section">
        <h3 class="section-title">查勘结论</h3>
        
        <!-- 是否存在新增加的损坏部位 -->
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="是否存在新增加的损坏部位" prop="hasNewDamage">
              <el-radio-group v-model="formData.hasNewDamage">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="16" v-if="formData.hasNewDamage === 1">
            <el-form-item label="新增加的损坏情况说明" prop="newDamageDescription">
              <el-input
                v-model="formData.newDamageDescription"
                type="textarea"
                :rows="2"
                placeholder="请输入新增加的损坏情况说明"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 原有损坏部位是否存在扩大或程度加重 -->
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="原有损坏部位是否存在扩大或程度加重" prop="hasExistingDamageExpansion">
              <el-radio-group v-model="formData.hasExistingDamageExpansion">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="16" v-if="formData.hasExistingDamageExpansion === 1">
            <el-form-item label="原有损坏部位扩大或程度加重说明" prop="existingDamageDescription">
              <el-input
                v-model="formData.existingDamageDescription"
                type="textarea"
                :rows="2"
                placeholder="请输入原有损坏部位扩大或程度加重说明"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 完损评定等级是否调整 -->
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="完损评定等级是否调整" prop="isDamageGradeAdjusted">
              <el-radio-group v-model="formData.isDamageGradeAdjusted">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="16" v-if="formData.isDamageGradeAdjusted === 1">
            <el-form-item label="完损评定等级调整说明" prop="damageGradeAdjustmentDescription">
              <el-input
                v-model="formData.damageGradeAdjustmentDescription"
                type="textarea"
                :rows="2"
                placeholder="请输入完损评定等级调整说明"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 是否参与城市体检 -->
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="是否参与城市体检" prop="participateInCityInspection">
              <el-radio-group v-model="formData.participateInCityInspection">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="16" v-if="formData.participateInCityInspection === 1">
            <el-form-item label="城市体检说明" prop="cityInspectionDescription">
              <el-input
                v-model="formData.cityInspectionDescription"
                type="textarea"
                :rows="2"
                placeholder="请输入城市体检说明"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 城市体检附件 -->
        <el-row>
          <el-col :span="24">
            <el-form-item label="城市体检附件" prop="cityInspectionAttachments">
              <DocumentUpload
                v-model="formData.cityInspectionAttachments"
                :show-tips="true"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </div>
    </el-form>
  </div>
</template>

<script>
import InspectionItem from './InspectionItemOld.vue'
import DocumentUpload from '@/components/DocumentUpload.vue'

export default {
  name: 'SevereDamageForm',
  components: {
    InspectionItem,
    DocumentUpload
  },
  data() {
    return {
      // 字典数据
      dictData: {
        // 房屋用途
        houseUsageDict: [
          { id: 'residential', name: '住宅' },
          { id: 'non-residential', name: '非住宅' }
        ],
        // 保护性质
        protectionNatureDict: [
          { id: 'yes', name: '是' },
          { id: 'no', name: '否' }
        ],
        // 保护类型
        protectionTypeDict: [
          { id: 'national', name: '全国重点文物保护单位' },
          { id: 'municipal', name: '市级文物保护单位' },
          { id: 'district', name: '区级文物保护单位' },
          { id: 'historical', name: '历史建筑' },
          { id: 'unregistered', name: '未登记等级' },
          { id: 'characteristic', name: '历史风貌建筑（特殊）' },
          { id: 'general', name: '历史风貌建筑（重点）' },
          { id: 'disaster', name: '历史风貌建筑（一般）' }
        ],
        // 结构类型
        structureTypeDict: [
          { id: 'brick', name: '砖混结构' },
          { id: 'steel', name: '钢筋混凝土上结构' },
          { id: 'steel-wood', name: '钢木结构' },
          { id: 'brick-wood', name: '砖木结构' },
          { id: 'other', name: '其他' }
        ],
        // 楼层形式
        floorFormDict: [
          { id: 'precast', name: '预制' },
          { id: 'cast-in-place', name: '现浇空心楼' },
          { id: 'wood', name: '木楼（房间）板' },
          { id: 'no-floor', name: '无楼板' },
          { id: 'other', name: '其他' }
        ]
      },
      // 表单验证规则
      rules: {
        // 基本信息必填验证
        address: [
          { required: true, message: '请输入地址', trigger: 'submit' }
        ],
        aboveGroundFloors: [
          { required: true, message: '请输入地上层数', trigger: 'submit' }
        ],
        undergroundFloors: [
          { required: true, message: '请输入地下层数', trigger: 'submit' }
        ],
        buildingArea: [
          { required: true, message: '请输入建筑面积', trigger: 'submit' }
        ],
        buildingHeight: [
          { required: true, message: '请输入建筑高度', trigger: 'submit' }
        ],
        buildingPeriod: [
          { required: true, message: '请选择建筑期间', trigger: 'submit' }
        ],
        houseCount: [
          { required: true, message: '请输入房屋套数', trigger: 'submit' }
        ],
        houseUsage: [
          { required: true, message: '请选择房屋用途', trigger: 'submit' }
        ],
        protectionNature: [
          { required: true, message: '请选择保护建筑性质', trigger: 'submit' }
        ],
        structureType: [
          { required: true, message: '请选择结构类型', trigger: 'submit' }
        ],
        floorForm: [
          { required: true, message: '请选择楼板形式', trigger: 'submit' }
        ],
        // InspectionItem 字段必填验证
        foundationIssue: [
          { required: true, message: '请选择地基基础是否存在问题', trigger: 'submit' }
        ],
        concreteColumnIssue: [
          { required: true, message: '请选择钢筋混凝土柱是否存在缺陷', trigger: 'submit' }
        ],
        masonryIssue: [
          { required: true, message: '请选择砌体结构是否存在问题', trigger: 'submit' }
        ],
        woodenIssue: [
          { required: true, message: '请选择木构件是否存在问题', trigger: 'submit' }
        ],
        roofLeakageIssue: [
          { required: true, message: '请选择屋面是否存在严重漏雨', trigger: 'submit' }
        ],
        roofStructureIssue: [
          { required: true, message: '请选择屋面构造层是否存在缺陷', trigger: 'submit' }
        ],
        floorOverallDamageIssue: [
          { required: true, message: '请选择是否存在整体面层严重损坏', trigger: 'submit' }
        ],
        woodFloorDamageIssue: [
          { required: true, message: '请选择是否存在木楼地面严重损坏', trigger: 'submit' }
        ],
        stairsDamageIssue: [
          { required: true, message: '请选择楼梯是否严重损坏', trigger: 'submit' }
        ],
        otherFloorDamageIssue: [
          { required: true, message: '请选择是否存在其他楼地面损坏', trigger: 'submit' }
        ],
        otherIssue: [
          { required: true, message: '请选择是否存在其他问题', trigger: 'submit' }
        ],
        exteriorDecorationIssue: [
          { required: true, message: '请选择外檐装饰材料是否存在问题', trigger: 'submit' }
        ],
        balconyRailingIssue: [
          { required: true, message: '请选择阳台栏板是否存在问题', trigger: 'submit' }
        ],
        windowDoorIssue: [
          { required: true, message: '请选择门窗是否存在问题', trigger: 'submit' }
        ],
        ceilingIssue: [
          { required: true, message: '请选择顶棚是否存在问题', trigger: 'submit' }
        ],
        decorationOtherIssue: [
          { required: true, message: '请选择装修部分是否存在其他问题', trigger: 'submit' }
        ],
        drainageIssue: [
          { required: true, message: '请选择下水道是否严重堵塞', trigger: 'submit' }
        ],
        powerLineIssue: [
          { required: true, message: '请选择电力管线是否老化', trigger: 'submit' }
        ],
        equipmentOtherIssue: [
          { required: true, message: '请选择设备部分是否存在其他问题', trigger: 'submit' }
        ],
        // 查勘结论必填验证
        hasNewDamage: [
          { required: true, message: '请选择是否存在新增加的损坏部位', trigger: 'submit' }
        ],
        hasExistingDamageExpansion: [
          { required: true, message: '请选择原有损坏部位是否存在扩大或程度加重', trigger: 'submit' }
        ],
        isDamageGradeAdjusted: [
          { required: true, message: '请选择完损评定等级是否调整', trigger: 'submit' }
        ],
        participateInCityInspection: [
          { required: true, message: '请选择是否参与城市体检', trigger: 'submit' }
        ]
      },

      formData: {
        address: '',
        addressStatus: '',
        aboveGroundFloors: 0,
        undergroundFloors: 0,
        buildingArea: 0.00,
        buildingHeight: 0.00,
        buildingPeriod: '2025',
        houseCount: 0,
        houseUsage: '',
        protectionNature: '',
        protectionType: '',
        structureType: '',
        floorForm: '',
        // 地基基础检查项字段
        foundationIssue: null,
        foundationInputText: '',
        foundationAttachments: '',
        foundationDescription: '无',
        // 钢筋混凝土柱检查项字段
        concreteColumnIssue: null,
        concreteColumnInputText: '',
        concreteColumnAttachments: '',
        concreteColumnDescription: '',
        // 砌体结构检查项字段
        masonryIssue: null,
        masonryLocation: '',
        masonryAttachments: '',
        masonryDescription: '',
        // 木构件检查项字段
        woodenIssue: null,
        woodenLocation: '',
        woodenAttachments: '',
        woodenDescription: '',
        // 屋面-严重漏雨检查项字段
        roofLeakageIssue: null,
        roofLeakageLocation: '',
        roofLeakageAttachments: '',
        roofLeakageDescription: '',
        // 屋面-构造层缺陷检查项字段
        roofStructureIssue: null,
        roofStructureLocation: '',
        roofStructureAttachments: '',
        roofStructureDescription: '',
        // 楼地面损坏检查项字段
        floorOverallDamageIssue: null,
        floorOverallDamageLocation: '',
        floorOverallDamageAttachments: '',
        floorOverallDamageDescription: '',
        // 木楼地面严重损坏检查项字段
        woodFloorDamageIssue: null,
        woodFloorDamageLocation: '',
        woodFloorDamageAttachments: '',
        woodFloorDamageDescription: '',
        // 楼梯严重损坏检查项字段
        stairsDamageIssue: null,
        stairsDamageLocation: '',
        stairsDamageAttachments: '',
        stairsDamageDescription: '',
        // 其他楼地面损坏检查项字段
        otherFloorDamageIssue: null,
        otherFloorDamageLocation: '',
        otherFloorDamageAttachments: '',
        otherFloorDamageDescription: '',
        // 其他问题检查项字段
        otherIssue: null,
        otherIssueLocation: '',
        otherIssueAttachments: '',
        otherIssueDescription: '',
        // 装修部分 - 外檐装饰材料检查项字段
        exteriorDecorationIssue: null,
        exteriorDecorationLocation: '',
        exteriorDecorationAttachments: '',
        exteriorDecorationDescription: '',
        // 装修部分 - 阳台栏板检查项字段
        balconyRailingIssue: null,
        balconyRailingLocation: '',
        balconyRailingAttachments: '',
        balconyRailingDescription: '',
        // 装修部分 - 门窗检查项字段
        windowDoorIssue: null,
        windowDoorLocation: '',
        windowDoorAttachments: '',
        windowDoorDescription: '',
        // 装修部分 - 顶棚检查项字段
        ceilingIssue: null,
        ceilingLocation: '',
        ceilingAttachments: '',
        ceilingDescription: '',
        // 装修部分 - 其他问题检查项字段
        decorationOtherIssue: null,
        decorationOtherLocation: '',
        decorationOtherAttachments: '',
        decorationOtherDescription: '',
        // 设备部分 - 下水道严重堵塞检查项字段
        drainageIssue: null,
        drainageLocation: '',
        drainageAttachments: '',
        drainageDescription: '',
        // 设备部分 - 电力管线老化检查项字段
        powerLineIssue: null,
        powerLineLocation: '',
        powerLineAttachments: '',
        powerLineDescription: '',
        // 设备部分 - 其他问题检查项字段
        equipmentOtherIssue: null,
        equipmentOtherLocation: '',
        equipmentOtherAttachments: '',
        equipmentOtherDescription: '',
        // 查勘结论部分字段
        hasNewDamage: null,                    // 是否存在新增加的损坏部位
        newDamageDescription: '',              // 新增加的损坏情况说明
        hasExistingDamageExpansion: null,      // 原有损坏部位是否存在扩大或程度加重
        existingDamageDescription: '',         // 原有损坏部位扩大或程度加重说明
        isDamageGradeAdjusted: null,           // 完损评定等级是否调整
        damageGradeAdjustmentDescription: '',  // 完损评定等级调整说明
        participateInCityInspection: null,     // 是否参与城市体检
        cityInspectionDescription: '',         // 城市体检说明
        cityInspectionAttachments: ''          // 城市体检附件
      }
    }
  },
  computed: {
  },
  watch: {
    // 监听新增损坏字段变化，选择"否"时清空说明
    'formData.hasNewDamage'(newVal) {
      if (newVal === 0) {
        this.formData.newDamageDescription = ''
      }
    },
    // 监听原有损坏扩大字段变化，选择"否"时清空说明
    'formData.hasExistingDamageExpansion'(newVal) {
      if (newVal === 0) {
        this.formData.existingDamageDescription = ''
      }
    },
    // 监听完损等级调整字段变化，选择"否"时清空说明
    'formData.isDamageGradeAdjusted'(newVal) {
      if (newVal === 0) {
        this.formData.damageGradeAdjustmentDescription = ''
      }
    },
    // 监听城市体检字段变化，选择"否"时清空说明
    'formData.participateInCityInspection'(newVal) {
      if (newVal === 0) {
        this.formData.cityInspectionDescription = ''
      }
    }
  },
  methods: {
    // 通用字典名称查找方法
    getDictName(dictType, id) {
      const item = this.dictData[dictType].find(item => item.id === String(id));
      return item ? item.name : id;
    },
    
    // 根据名称查找ID的辅助方法
    getDictIdByName(dictType, name) {
      if (!name) return null;
      const item = this.dictData[dictType].find(item => item.name === name);
      return item ? item.id : null;
    },
    
    // 表单验证方法（使用el-form的原生验证）
    validate() {
      return new Promise((resolve, reject) => {
        // 动态添加条件验证规则
        this.addDynamicRules()
        
        // 使用el-form的原生validate方法
        this.$refs.severeForm.validate((valid) => {
          if (valid) {
            resolve(true)
          } else {
            this.$message.error('请检查表单填写，有必填项未填写或格式不正确')
            reject(false)
          }
        })
      })
    },
    
    // 动态添加验证规则
    addDynamicRules() {
      // InspectionItem组件现在会自己管理验证规则，这里只需要处理查勘结论部分
      
      // 为查勘结论的说明字段添加动态验证
      if (this.formData.hasNewDamage === 1) {
        this.$set(this.rules, 'newDamageDescription', [
          { required: true, message: '选择"是"时，此项为必填项', trigger: 'submit' }
        ])
      } else {
        this.$delete(this.rules, 'newDamageDescription')
      }
      
      if (this.formData.hasExistingDamageExpansion === 1) {
        this.$set(this.rules, 'existingDamageDescription', [
          { required: true, message: '选择"是"时，此项为必填项', trigger: 'submit' }
        ])
      } else {
        this.$delete(this.rules, 'existingDamageDescription')
      }
      
      if (this.formData.isDamageGradeAdjusted === 1) {
        this.$set(this.rules, 'damageGradeAdjustmentDescription', [
          { required: true, message: '选择"是"时，此项为必填项', trigger: 'submit' }
        ])
      } else {
        this.$delete(this.rules, 'damageGradeAdjustmentDescription')
      }
      
      if (this.formData.participateInCityInspection === 1) {
        this.$set(this.rules, 'cityInspectionDescription', [
          { required: true, message: '选择"是"时，此项为必填项', trigger: 'submit' }
        ])
      } else {
        this.$delete(this.rules, 'cityInspectionDescription')
      }
    },
    
    // 重置表单方法
    resetForm() {
      // 使用 el-form 的 resetFields 方法
      this.$refs.severeForm.resetFields()
      
      // 手动设置默认值
      this.$nextTick(() => {
        this.formData.buildingPeriod = '2025'
        this.formData.foundationDescription = '无'
      })
    },
    
    // 清除验证结果
    clearValidate() {
      this.$refs.severeForm.clearValidate()
    },
    
    // 提交表单方法
    async submitForm() {
      try {
        await this.validate()
        // 验证通过，可以提交表单数据
        console.log('表单数据：', this.formData)
        this.$message.success('表单验证通过！')
        return this.formData
      } catch (error) {
        console.error('表单验证失败：', error)
        throw error
      }
    }
  }
}
</script>

<style scoped>
.severe-damage-form {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
}

/* el-form-item 样式调整 */
::v-deep .el-form-item {
  margin-bottom: 18px;
}

::v-deep .el-form-item__label {
  font-weight: 500;
  color: #606266;
}

.form-header {
  text-align: center;
  margin-bottom: 30px;
  padding-bottom: 15px;
  border-bottom: 2px solid #409EFF;
}

.form-title {
  margin: 0;
  color: #409EFF;
  font-size: 24px;
  font-weight: bold;
}

.section {
  margin-bottom: 30px;
}

.section-title {
  margin: 0 0 20px 0;
  color: #303133;
  font-size: 18px;
  font-weight: 600;
  padding: 10px;
  background: #f5f7fa;
  border-left: 4px solid #409EFF;
}

.structure-section {
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  padding: 10px;
  background: #fafafa;
}

/* Element UI 组件样式调整 */
::v-deep .el-input-number {
  width: 100%;
}

::v-deep .el-date-picker {
  width: 100%;
}

::v-deep .el-textarea .el-textarea__inner {
  resize: vertical;
}

::v-deep .el-radio {
  margin-right: 15px;
}

::v-deep .el-radio__label {
  font-size: 14px;
}

@media (max-width: 768px) {
  /* 移动端响应式样式 - 现在主要使用 el-row 和 el-col 的原生响应式 */
}

.inspection-item {
  margin-bottom: 10px;
  padding: 10px;
  background: #fff;
  border-radius: 8px;
  border: 1px solid #e4e7ed;
}
</style>